<template>
  <u-popup :show="show" mode="center" @close="closeHandle" bgColor="transparent">
    <view class="main-modal"
      :style="{backgroundImage:'url('+staticImgs.bg+')'}"
    >
      <view class="img-btn" @click="clickHandle">
        <image class="img" :src="staticImgs.btn" mode="widthFix"></image>
      </view>
    </view>
  </u-popup>
</template>

<script>
  
  export default{
    data(){
      return {
        staticImgs:{
          bg:this.imgBaseURL + '/scl/recommend-checkup-modal-new.png',
          btn:this.imgBaseURL + '/scl/recommend-checkup-btn.png',
        },
        show:false,
      }
    },
    methods:{
      closeHandle(){
        this.show = false
        this.$emit('close')
      },
      open(){
        console.log('=====open=====')
        this.show = true
      },
      hide(){
        this.show = false
      },
      clickHandle(){
        this.show = false
        this.$emit('ok')
      }
    }
  }
  
</script>

<style lang="scss" scoped>
  
  .main-modal{
    width:500rpx;
    height: 590rpx;
    margin: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .img-btn{
      width: 330rpx;
      height: 90rpx;
      margin-bottom: 48rpx;
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>